<!DOCTYPE html>

<html>
    <head>
        <title>个人主页</title>
        <meta charset="utf-8">
        <style>
            #end{
                background-color: gray;
                font-size: 20px;
                width: 1000px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin: 0 auto;

                 
            }
            p{
                font-family: 仿宋;
                color: black;
                font-size: 20px;
            }
            body{
                margin: 0;
                margin-bottom: 80px;
                background-image: url(beijing.jpg)
            }
            #banner{
                height: 600px;
                /*设置背景图片*/
                background-image:  url(bg.jpeg);
                background-position: 50% 50%;
            }
            #container{
                width: 1000px;
                margin: 0 auto;
            }
            /*img标签如果不设置宽高，那么宽高等于所显示的图片的宽高，如果同时设置了宽和高，那么就等于设置的宽高，如果只设置了宽度，那么高度会随之等比例缩放，如果只设置了高度，宽度会等比例缩放*/
            .pic{
                /*宽度设置为100%，表示和父元素等宽*/
                width: 100%;

            }
            .text{
                text-indent: 2em;
            }
            #header{
                width: 100%;
                height: 80px;
                
                position: fixed;
                top: 0;
                left: 0;

            }
            #inner{
                width: 1025px;
                height: 83px;
                background-color: gray;
                margin: 0 auto;
            }
            table{
                width: 1000px;
                text-align: center;
            }
            td{
                font-size: 25px;
                font-family: 仿宋;
                line-height: 80px;
                font-weight: 700;
            }
            #tu{
                background-image: url(tu.jpg);
                width: 100%;
                height: 500px;
                position: relative;

            }
            .photo{
                width: 150px;
                height: 150px;
                border-radius: 50%;
                border: solid 4px white;
                position: absolute;

            }
            #f1{
                top: 35px;
                left: 40px;
            }
            #f2{
                bottom: 40px;
                left: 400px;
            }
            #f3{
                top: 45px;
                right: 30px;
            }
            #inner a{
                text-decoration: none;
                display: inline-block;
            }
            #inner a:hover{
                background-color: darkviolet;
            }
            h2{
                font-family: 楷体;
                font-size: 30px;
            }
            h1{
                font-family: 楷体;
            }

        </style>
    </head>
    <body>
        <div id="banner"></div>
        <div id="container">
            <h1 id="num1">个人简介</h1>
            <p class="text">大家好。我叫郭鹏飞，我的家乡在河南省南阳市方城县，就读于焦作师范高等专科学校。</p>
            <img class="pic" src="geren.jpg" alt="">
            <h2 id="num2">个人介绍</h2>
            <p class="text">大家好。我叫郭鹏飞，我的家乡在河南省南阳市方城县，就读于焦作师范高等专科学校，计算机与信息工程学院，专业是计算机网络技术。目前在智游培训HTML5，在这四个月里，我一定会努力学习，与老师、同学好好相处，也希望四个月之后的我能够掌握好这门技术，找到一个好的工作。</p>
            <img class="pic" src="jianjie.jpg" alt="">
            <h2 id="num3">我的学校</h2>
            <p class="text">焦作师范高等专科学校是经国家教育部批准的一所以教师教育为主的全日制普通高等专科学校。其前身为创办于1907年（清光绪33年）的“怀庆府师范学堂”，至今已有百余年的办学历史，是河南省为数不多的具有百年办学历史的高校之一。</p>
            <a href="http://www.jzsz.cn/">学校风景</a>
            <img class="pic" src="daxue.jpg" alt=""  >
            <h2 id="num4">我的家乡</h2>
            <p class="text">方城古称裕州，历史悠久、文化底蕴丰厚。始于夏代、为禹贡豫州之域，春秋为楚地，是中国丝绸之路发源地之一。现存中华曾氏祖根地：古缯国遗址、天下第一古长城：楚长城；三国时期古战场：博望故城；东汉湖阳公主修真之所：炼真宫、佛沟摩崖石刻等文化遗址。是秦末农民起义领袖陈胜、法圣汉廷尉张释之、西汉著名外交家、丝绸之路开拓者博望侯张骞等历史文化名人故里。
方城是中华文明的发源地之一。历史悠久，山川秀丽，位于南阳伏牛山世界地质公园东部，旅游资源丰富，风景名胜有80多处。拥有国家4A级景区：方城七十二潭、七峰山生态旅游区；国家级水利风景区：望花湖风景区；河南省森林公园：大乘山森林公园以及被誉为“北武当山“的黄石山风景区”等众多景点。</p>
<a href="http://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gbk&word=%B7%BD%B3%C7%CF%D8%B7%E7%BE%B0%C7%F8%CD%BC%C6%AC&hs=2&xthttps=000000&fr=ala&ori_query=%E6%96%B9%E5%9F%8E%E5%8E%BF%E9%A3%8E%E6%99%AF%E5%8C%BA%E5%9B%BE%E7%89%87&ala=0&alatpl=sp&pos=0">方城风采</a>
            <img class="pic" src="shan.jpg" alt="">
            <h2 id="num5">我的同学</h2>
            <div id="tu">
               <div>
                   <img src="ao.jpg" class="photo" id="f2">
                   <img src="o.jpg" class="photo" id="f3">
                   <img src="en.jpg" class="photo" id="f1">
               </div>
            </div>
 <hr>

        </div>
        <div id="end">到底啦~~~ ~~~啦底到
            <div><a href=""#num1"">回顶部↑</a></div>
        </div>

        <div id="header">
            <div id="inner">
<table>
    <tr>
        <td><a href="#num1">个人简介</a></td>
        <td><a href="#num2">个人介绍</a></td>
        <td><a href="#num3">我的学校</a></td>
        <td><a href="#num4">我的家乡</a></td>
        <td><a href="#num5">我的同学</a></td>
    </tr>

</table>
            </div>
        </div>
    </body>
</html>